<template>
  <!-- 团队选择角色 -->
  <div>
    <el-dialog :title="$t('teamDoc.people.roleListDf')" v-model="visibleDialog" width="600px" :append-to-body="true"
      :close-on-click-modal="false" @close="closeClick" @open="openDialog">
      <div>
        <div class="searchBox">
          <el-input :placeholder="$t('teamDoc.people.searchRole')" prefix-icon="el-icon-search" v-model="searchInput"
            class="inputClass" @keyup.enter.native="inputEnter">
          </el-input>
        </div>
        <el-table :data="tableData" style="width: 100%" height="350" :show-header="false"
          @row-click="tableDataRowClick">
          <el-table-column>
            <template #default="scope">

              <div class="role_item_box"
                :class="[userRoleInfo.roleId == scope.row.id ? 'role_item_box_active' : '', roleData.rank > scope.row.rank ? 'diabledsBtn' : '', scope.row.rank == 1 ? 'diabledsBtn' : '']">
                <div class="name">
                  <div>
                    <svg-icon icon-class="user" :style="{ color: scope.row.icon ? scope.row.icon : '#000000' }" />
                    <span>{{ scope.row.roleName }}</span>
                  </div>

                </div>
                <div class="describe">{{ scope.row.remark }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 5px;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="requestStr.page" :page-sizes="[10, 20, 30, 40]" :page-size="requestStr.size"
            layout="total,  prev, pager, next,sizes" :total="requestStr.total">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import teamRoleApi from '@/api/teamKnowdge/teamRoleApi'
import { useTeamRoleStore } from '@/store/modules/teamRole'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const teamRoleStore = useTeamRoleStore()
const route = useRoute()
const visibleDialog = ref(false)
const userRoleInfo = reactive({
  id: "",
  objectId: null,
  objectName: "",
  objectType: null,
  roleId: null,
  roleName: "",
  roleRank: null,
  teamId: "",
  treeNodeId: ""
})
const roleData = teamRoleStore.roleData
const userRoleList = ref([]) //保存
const tableData = ref([])
const teamId = ref(null)
const requestStr = reactive({
  page: 1,
  size: 10,
  total: 0
})
const searchInput = ref("")
const emit = defineEmits(['RowClick'])
const props = defineProps({
  pageType: {
    //teamPeople:团队成员,team:团队文件
    type: String,
    default: ""
  }
})


onMounted(() => {
  teamId.value = route.query.teamId
})

const getTableData = async (row) => {
  if (Array.isArray(row)) {
    userRoleList.value = row
  } else {
    console.log(row, 'row')
    userRoleInfo.id= (row.id).toString()
    userRoleInfo.objectId = row.objectId
    userRoleInfo.objectName = row.objectName
    userRoleInfo.objectType = row.objectType
    userRoleInfo.roleId = row.roleId
    userRoleInfo.roleName = row.roleName
    userRoleInfo.roleRank = row.roleRank
    userRoleInfo.teamId = row.teamId
    userRoleInfo.treeNodeId = row.treeNodeId
    
  }
  await teamRoleApi.apiTeamRoleQuery({
    teamId: teamId.value,
    roleName: searchInput.value,
    page: requestStr.page - 1,
    size: requestStr.size
  }).then((res) => {
    res.data.rows.forEach((element) => {
      element.params = JSON.parse(element.params)
    })
    visibleDialog.value = true
    tableData.value = res.data.rows
    requestStr.total = res.data.total
  })
}
const tableDataRowClick = (row) => {
  if (roleData.rank > row.rank || row.rank == 1) {
    return
  }
  if (userRoleList.value.length != 0) {
    emit('RowClick', row, userRoleList.value)
  } else {
    // console.log(userRoleInfo, 'userRoleInfo')
    emit('RowClick', row, [userRoleInfo])
  }
  closeClick()
}
const inputEnter = () => {
  if (userRoleList.value.length != 0) {
    getTableData(userRoleList.value)
  } else {
    getTableData(userRoleInfo)
  }
}
const closeClick = () => {
  requestStr.page = 1
  tableData.value = []
  userRoleList.value = []
  // userRoleInfo.roleId = null
  visibleDialog.value = false
}
const openDialog = () => {
  if (props.pageType == 'teamPeople') {
    teamRoleStore.getUserTeamRoleApi({
      teamId: teamId.value,
      userId: userStore.userId
    })
  }
}
const handleSizeChange = (val) => {
  requestStr.size = val
  getTableData(teamId.value)
}
const handleCurrentChange = (val) => {
  requestStr.page = val
  getTableData(teamId.value)
}
defineExpose({
  getTableData
})

</script>
<style lang="scss" scoped>
.role_item_box {
  color: #1f2329;

  .name {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
  }

  .describe {
    font-size: 11px;
  }
}

.role_item_box_active {
  color: #1456f0 !important;
}

.all_role_text {
  margin-left: 15px;
  color: #bbbfc4;
  font-size: 13px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

.diabledsBtn {
  color: #bbbfc4;
  cursor: no-drop !important;
}

.inputClass {
  width: 220px;

  :deep(.el-input__inner) {
    border-color: #eee;
  }
}
</style>
